<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div style="width: 20%; float: left">
          <a-space direction="vertical" style="width: 100%; margin-left: 13px">
            <a-input-group compact>
              <a-cascader
                v-model:value="value18"
                style="width: 100%"
                :options="options1"
                expand-trigger="hover"
                placeholder="请选择行政区"
                changeOnSelect
                @change="onChange"
              />
            </a-input-group>
          </a-space>
        </div>
        <div style="width: 20%; float: left; margin-top: 15px; margin-left: 25px">
          <a-input
            v-model:value="txtKeyWord"
            placeholder="请输入姓名或企安安编码进行查询"
            enter-button
            style="width: 100%"
          />
        </div>
        <div style="width: 27%; float: left; margin-top: 15px; margin-left: 25px">
          <a-form-item name="role_type">
            <a-checkbox-group v-model:value="role_type" @change="achange">
              <a-checkbox value="村级用户">村级用户</a-checkbox>
              <a-checkbox value="乡镇用户">乡镇用户</a-checkbox>
              <a-checkbox value="区级用户">区级用户</a-checkbox>
              <a-checkbox value="市级用户">市级用户</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </div>
        <div style="width: 17%; float: left; margin-top: 15px; margin-left: 25px">
          <a-button type="primary" :icon="h(SearchOutlined)" @click="searchBtn">搜索</a-button>
        </div>
      </div>
      <a-table
        style="margin-top: 10px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      >
        <!-- vue3 中的写法 -->
        <template #headerCell="{ column }">
          <template v-if="column.key == 'nickname'">
            <Tooltip placement="top">
              <template #title>
                <span>用户姓名</span>
              </template>
              <span> 用户姓名 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'district'">
            <Tooltip placement="top">
              <template #title>
                <span>管辖区域</span>
              </template>
              <span> 管辖区域 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'create_on'">
            <Tooltip placement="top">
              <template #title>
                <span>绑定时间</span>
              </template>
              <span>绑定时间</span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'create_ip'">
            <Tooltip placement="top">
              <template #title>
                <span>绑定IP</span>
              </template>
              <span> 绑定IP </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'qaakey'">
            <Tooltip placement="top">
              <template #title>
                <span>企安安ID</span>
              </template>
              <span> 企安安ID </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'role_type'">
            <Tooltip placement="top">
              <template #title>
                <span>用户类型</span>
              </template>
              <span> 用户类型 </span>
            </Tooltip>
          </template>
        </template>
      </a-table>
      <div class="pagination" style="float: right">
        <a-pagination
          show-size-changer
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          @show-size-change="onShowSizeChange"
        />
      </div>
      <a-modal v-model:visible="open" title="修改权限" @ok="handleOk" style="padding-top: 10%">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
        >
          <a-form-item label="用户类型" name="role_type_name" style="margin: 30px 0px">
            <a-select
              v-model:value="role_type_name"
              placeholder="请选择用户类型"
              style="width: 150px"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="5">村级用户</a-select-option>
              <a-select-option value="4">乡镇用户</a-select-option>
              <a-select-option value="3">区级用户</a-select-option>
              <a-select-option value="2">市级用户</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="所属行政区">
            <a-cascader
              v-model:value="strRegion"
              style="width: 250px"
              :options="options1"
              expand-trigger="hover"
              placeholder="请选择行政区"
              changeOnSelect
            />
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- <BasicTable @register="registerTable">
			<template #id="{ record }"> </template>
		</BasicTable> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch, h } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { getCheckUserList, getRegion, updateregion } from '/@/api/demo/system'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { iTableData, iTableColumns } from './types/table';
  let open = ref<boolean>(false);
  let options1 = ref<any[]>([]);
  let userInfo = ref<any>(null);
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(12);
  const role_type_name = ref<string>();
  const value18 = ref<string[]>([]);
  const strRegion = ref<string[]>([]);
  const txtKeyWord = ref<string>();
  const role_type = ref<string[]>([]);
  const currow = ref<any>(null);
  let total = ref(0);
  interface FormState {
    rolename: string;
    xzq: string[];
    remember: boolean;
  }
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 100,
      },
      {
        title: '管辖范围',
        dataIndex: 'district',
        key: 'district',
        align: 'left',
        width: 200,
      },
      {
        title: '用户姓名',
        dataIndex: 'nickname',
        key: 'nickname',
        align: 'center',
        width: 100,
      },

      {
        title: '绑定时间',
        dataIndex: 'create_on',
        key: 'create_on',
        align: 'center',
        width: 170,
      },
      {
        title: 'IP地址',
        dataIndex: 'create_ip',
        key: 'create_ip',
        align: 'center',
        width: 100,
      },
      {
        title: '企安安ID',
        dataIndex: 'qaakey',
        key: 'qaakey',
        align: 'center',
        width: 170,
      },

      {
        title: '用户类型',
        dataIndex: 'role_type',
        key: 'role_type',
        align: 'center',
        width: 100,
      },
      {
        title: '操作',
        align: 'center',
        width: 80,
        customCell: (row) => {
          return {
            innerHTML: `<span style="color:blue;cursor: pointer;" @click="showModal()">编辑</span>`,
            onClick: async () => {
              showModal(row);
            },
          };
        },
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  let { tableData, loading } = toRefs(data);
  async function getData() {
    const { role } = userInfo.value;

    let groupname = '';
    if (role === 'City') {
      groupname = 'qxmc';
    } else if (role === 'Area') {
      groupname = 'jzmc';
    } else if (role === 'Street') {
      groupname = 'czmc';
    }

    let params: any = {
      groupname: groupname,
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      txtKeyWord: txtKeyWord.value,
    };
    if (value18.value != undefined) {
      params.xzqdm = value18.value[0];
      params.towndm = value18.value[1];
      params.villagedm = value18.value[2];
    }
    console.log('role_type.value', role_type.value);
    if (role_type.value != undefined && role_type.value.length > 0) {
      var arrVal = '';
      for (var i = 0; i < role_type.value.length; i++) {
        arrVal += role_type.value[i] + ',';
      }

      params.role_type = arrVal;
    }
    loading.value = true;
    let res: any = await getCheckUserList(params);
    console.log('@res--工作进入汇总表', res.items);

    if (res || res.items.length > 0) {
      loading.value = false;
      data.tableData = [...res.items];
      total.value = res.total;
    }
  }
  const formState = reactive<FormState>({
    rolename: '',
    xzq: [],
    remember: true,
  });
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const showModal = (row: any) => {
    role_type_name.value = '';
    strRegion.value = [];
    currow.value = row;
    open.value = true;
  };

  const handleOk = (e: MouseEvent) => {
    if (role_type_name.value == '') {
      alert('请选择用户类型！');
      return;
    }
    if (strRegion.value.length == 0) {
      strRegion.value[0] = '';
      strRegion.value[1] = '';
      strRegion.value[2] = '';
    }
    console.log(strRegion);
    var parms = {
      role_type_name: role_type_name.value,
      xzqdm: strRegion.value[0],
      towndm: strRegion.value[1],
      villagedm: strRegion.value[2],
      id: currow.value.qaakey,
    };
    var rest = updateregion(parms);
    open.value = false;
    getData();
  };
  const achange = (e) => {
    role_type.value = e;
  };
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  // 导出

  function searchBtn() {
    data.loading = true;
    pageIndex.value=1;
    pageSize.value=15;
    getData();
  }

  async function getRegionData() {
    let res: any = await getRegion();
    options1.value = res;
  }
  function onChange(value) {
    value18.value = value;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight;
    });
  };
  const onShowSizeChange = () => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    // pageIndex.value = pageIndex;
    // pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******工作进展统计初始化******');
    getRegionData();
    getData();
    getTableHeight();
    // getTableData();
  });
</script>
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }
  .root-house-mng-main {
    margin: 6px;
  }
  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }
  }
</style>
